<template>
	<view class="popup">
		<u-popup v-model="uView.popup.show" mode="bottom" :mask-custom-style="{background: 'rgba(17, 17, 17, 0.4)'}"
			:safe-area-inset-bottom="true">
			<view class="wd-py-80r" style="background-color: #555;color:#fff">
				<view class="wd-flex wd-items-center wd-justify-around wd-text-center">
					<view class="" @click="activeObj.bringToFront()">
						<u-icon name="custom-icon-zhiding" custom-prefix="custom-icon" size="45"></u-icon>
						<view class="wd-pt-10r">置顶层</view>
					</view>
					<view class="" @click="activeObj.bringForward()">
						<u-icon name="custom-icon-shangyiceng" custom-prefix="custom-icon" size="45"></u-icon>
						<view class="wd-pt-10r">上一层</view>
					</view>
					<view class="" @click="activeObj.sendBackwards()">
						<u-icon name="custom-icon-xiaiyiceng" custom-prefix="custom-icon" size="45"></u-icon>
						<view class="wd-pt-10r">下一层</view>
					</view>
					<view class="" @click="activeObj.sendToBack()">
						<u-icon name="custom-icon-zhidi" custom-prefix="custom-icon" size="45"></u-icon>
						<view class="wd-pt-10r">置底层</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fabirc from 'fabric'
	export default {
		name: "layer-popup",
		props: {
			canvas: {
				type: Object,
			},
		},
		data() {
			return {
				activeObj: {},
				uView: {
					popup: {
						show: false
					}
				}
			};
		},
		watch: {},
		methods: {
			//展示
			show() {
				this.uView.popup.show = true;
				this.activeObj = this.canvas.getActiveObject() || {};
			},
			//关闭
			close() {
				this.uView.popup.show = false;
			},
			
		},
	}
</script>

<style>
	.popup {
	}
</style>